<template>
  <div class="app-container">
    <el-card class="box-card" style="padding-bottom: 10px">
      <div slot="header" class="clearfix">
        <span>参数列表</span>
      </div>
      <div v-for="(param,index) in paramList" :key="param" class="text item">
        <el-card style="width: 200px;height: 130px;margin: 0 10px 10px 10px; float: left;padding-right: 5px">
          <p style="margin-top: -5px;font-size: 5px;text-align: right;margin-right: -15px;margin-bottom: -5px;color: darkgray">
            <a  @click="removeParam(index)">x</a>
          </p>
          <el-select v-model="param.typeId" placeholder="类型">
            <el-option :key="0" label="随机" :value="''"></el-option>
            <el-option
              v-for="item in wordTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="param.classId" placeholder="词性" style="margin: 10px 0">
            <el-option :key="0" label="随机" :value="''"></el-option>
            <el-option
              v-for="item in wordClasses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-card>
      </div>
      <div style="margin-left: 10px">
        <br><br><br>
        <el-button @click="addParam">
          +
        </el-button>
        <el-button @click="findWord">
          ok
        </el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>结果</span>
      </div>
      <div class="">
        <span v-for="o in result" :key="o" class="text item" style="margin-right: 10px">
          {{o}}
        </span>
      </div>
    </el-card>
  </div>
</template>

<script>
import {commonList} from "@/utils/common";
import {list as listWordType} from "@/api/wordType"
import {list as listWordClass} from "@/api/wordClass"
import {findWord} from "@/api/word";

export default {
  name: "FindWord",
  data() {
    return {
      paramList: [],
      wordTypeIdList: [],
      wordClassIdList: [],
      wordTypes: [],
      wordClasses: [],
      result: []
    }
  },
  beforeMount() {
    this.listWordType()
    this.listWordClass()
    this.addParam()
  },
  methods: {
    findWord() {
      this.result = []
      this.result.push('处理中...')
      console.log(this.paramList)
      this.wordTypeIdList = []
      this.wordClassIdList = []
      for (let i = 0; i < this.paramList.length; i++) {
        this.wordClassIdList.push(this.paramList[i].classId)
        this.wordTypeIdList.push(this.paramList[i].typeId)
      }
      console.log(this.wordTypeIdList)
      findWord({size: 10, wordClassIdList: this.wordClassIdList, wordTypeIdList: this.wordTypeIdList}).then(res => {
        console.log(res)
        this.result = res.data
      })
    },
    removeParam(index) {
      this.paramList.splice(index,1)
    },
    addParam() {
      this.paramList.push({typeId: "", classId: ""})
      console.log(this.paramList)
    },
    listWordType() {
      commonList(this.wordTypes, listWordType, false)
    },
    listWordClass() {
      commonList(this.wordClasses, listWordClass, false)
    }
  }
}
</script>

<style scoped>

</style>
